<html>
<head>
	<meta charset="UTF-8"> 
	<style type="text/css">
		html,body{
			margin:0px;
		}
		#myCanvas{
			width:100%;
			height: 100%;
			border: 1px solid #ccc;
		}
	</style>

	<script type="text/javascript">
		function init(){

			// 2.获取画布对象，设置canva大小
			var canvas = document.getElementById("myCanvas");
			canvas.width  = window.innerWidth;
			canvas.height = window.innerHeight;

			// 3.获取绘图设备
			var ctx = canvas.getContext("2d");

			// 5.设置样式，绘制圆
			ctx.save();
			ctx.fillStyle = 'rgba(255,0,0,128)';
			ctx.strokeStyle = '#000000';
			// 6.绘制10万个点
			var s = new Date().getTime();
			drawPoints(ctx, canvas.width, canvas.height);
			var e = new Date().getTime();

			alert("绘制时间：" + (e-s)/1000.0 + "秒");
			
			ctx.restore();
		}

		function drawPoints(ctx, width, height){
						
			var cx,cy;
			for(var i=0; i<100000; i++){
				cx = Math.random() * width;
				cy = Math.random() * height;

				ctx.beginPath();
				ctx.arc(cx,cy,2,0,Math.PI*2,true);
				ctx.fill();
				ctx.stroke();
			}			
		}
	</script>

    <title>Canvas 绘图</title>
</head>

<body onload=init();>
	<!-- 1.定义Canvas元素-->
	<canvas id="myCanvas"></canvas>

</body>
</html>


